<template>
	<view class="bindMobile">
		<view class="title">
			绑定手机号
		</view>

		<view class="inputBox" style="margin-top: 100rpx;">
			<image :src="imaurl+'a3.png'" style="width: 48rpx;height: 48rpx;margin-right: 20rpx;" mode="">
			</image>
			<input type="number" v-model="mobile" placeholder="请输入手机号" />
		</view>
		<view class="inputBox" style="margin-top: 40rpx;">
			<image :src="imaurl+'a5.png'" style="width: 48rpx;height: 48rpx;margin-right: 20rpx;" mode="">
			</image>
			<input type="text" v-model="code" placeholder="请输入验证码" />
			<view v-if="codeFlag" class="yzm" @click="handleGetcode">
				获取验证码
			</view>
			<view v-else class="yzm">
				{{time}}s
			</view>

		</view>

		<view class="loginBox" @click="handleUserinfo">
			下一步
		</view>

	</view>
</template>

<script>
	import {
		send,
		bindmobile,
		MyIndex
	} from "@/api/api.js"
	export default {
		data() {
			return {
				codeFlag: true,
				time: 60,
				setInterval: null,
				mobile: "",
				code: "",
				imaurl: "https://szgb.tongchengbang.cc/img/image/"
			}
		},
		onLoad() {
			this.handleMyIndex()
		},
		methods: {
			async handleMyIndex() {
				let res = await MyIndex()
				// if (res.data.contact_information) {
				// 	uni.redirectTo({
				// 		url: "/pages/login/userInfo"
				// 	})
				// }
			},
			async handleGetcode() {
				const that = this
				if (that.mobile == "") {
					uni.showToast({
						title: '请输入手机号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				let res = await send({
					mobile: that.mobile,
					event: 'bind'
				})
				console.log("验证码", res)
				if (res.code == 1) {
					// uni.showToast({
					// 	title: res.message,
					// 	icon: "none",
					// 	duration: 1500
					// });
					// uni.showToast({
					// 	title: '验证码' + res.data,
					// 	icon: "none",
					// 	duration: 5000
					// });
					that.codeFlag = false
					const interval = setInterval(function() {
						if ((that.time--) <= 0) {
							that.time = 60
							that.codeFlag = true
							clearInterval(interval)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
				}

			},
			async handleUserinfo() {
				// uni.navigateTo({
				// 	url: "./userInfo"
				// })
				// return
				let res = await bindmobile({
					mobile: this.mobile,
					code: this.code
				})
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateTo({
							url: "./userInfo"
						})
					}, 2000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bindMobile {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		padding-top: 140rpx;
		box-sizing: border-box;

		.title {
			width: 200rpx;
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #333333;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-left: 70rpx;
		}

		.inputBox {
			width: 670rpx;
			height: 104rpx;
			background: #F6F6F6;
			box-shadow: 0rpx 0rpx 60rpx 0rpx rgba(255, 255, 255, 0.8);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			padding: 28rpx 20rpx;
			box-sizing: border-box;

			.yzm {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #00BF52;
				line-height: 33rpx;
				text-align: right;
				margin-left: 40rpx;
			}
		}

		.loginBox {
			width: 630rpx;
			height: 88rpx;
			background: #00BF52;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			margin: 0 auto;
			margin-top: 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>